import { defineComponent, render, createVNode, reactive } from 'vue'
import { ElDialog, ElButton, ElInput } from 'element-plus'
import JSONPretty from './JSONPretty'
import '../assets/style/dialog.scss'

const DialogComponent = defineComponent({
  props: {
    title: '',
    content: '',
    type: '',
  },

  setup(props, ctx) {
    let state = reactive({
      isShow: false,
      options: props,
    })

    ctx.expose({
      show(options) {
        state.options = options
        state.isShow = true
      },
    })

    return () => (
      <ElDialog v-model={state.isShow} title={state.options.title}>
        {{
          // default: () => <ElInput type="textarea" v-model={state.options.content} rows={20}  ></ElInput>,
          default: () => <JSONPretty jsonString={state.options.content}></JSONPretty>,
          footer: () =>
            state.options.type === 'import' && (
              <div>
                <ElButton type="primary">复制</ElButton>
                <ElButton onClick={() => (state.isShow = false)}>取消</ElButton>
              </div>
            ),
        }}
      </ElDialog>
    )
  },
})

let vm = null
export const Dialog = (options) => {
  if (!vm) {
    // 节点里面有这个元素就不再加了
    const el = document.createElement('div')
    vm = createVNode(DialogComponent, { options })
    document.body.appendChild((render(vm, el), el))
  }

  vm.component.exposed.show(options)
}
